<template>
  <div class="bodyBg">
    <!--**********动态切换数据面板**************-->
    <panel-group :count="count" @handleSetchartDatas="handleSetchartDatas" />
    <!--**********饼状图、柱状图**************-->
    <el-row :gutter="32">
      <el-col :xs="24" :sm="24" :lg="12">
        <div class="chart-wrapper">
          <bar-chart :cdata="chartData" />
        </div>
      </el-col>
      <el-col :xs="24" :sm="24" :lg="12">
        <div class="chart-wrapper">
          <pie-chart :cdata="chartData" />
        </div>
      </el-col>
    </el-row>
    <!--**********折线图**************-->
    <el-row :gutter="32">
      <el-col :xs="24" :sm="24" :lg="24">
        <div class="chart-wrapper">
          <line-chart :cdata="chartData" />
        </div>
      </el-col>
    </el-row>
    <!-- 初始密码登录修改密码弹框 -->
    <el-dialog title="修改初始密码" :visible.sync="dialogFormVisible">
      <el-form :model="form">
        <el-form-item label="新密码" :label-width="formLabelWidth">
          <el-input v-model="form.newPwd" autocomplete="off" placeholder="请输入您的新密码"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="changeFirstPwd">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import PanelGroup from "./dashboard/PanelGroup";
import LineChart from "./dashboard/LineChart";
import RaddarChart from "./dashboard/RaddarChart";
import PieChart from "./dashboard/PieChart";
import BarChart from "./dashboard/BarChart";

import {
  listByDept,
  listByLimit,
  listByType,
  listTypeArch,
  listTypeSearch,
  listYearSearch
} from "@/api/system/viewChart";
import { listSearchBar } from "@/api/system/search";

import { resetUserPwd } from "@/api/system/user";
var chartDatas = {
  // 数据组
  archData: {
    xData: [],
    seriesData: [],
    seriesName: "部门档案统计"
  },
  limitData: {
    xData: [],
    seriesData: [],
    seriesName: "档案期限统计"
  },
  typeData: {
    xData: [],
    seriesData: [],
    seriesName: "档案类型统计"
  },
  typeArchData: {
    xData: [],
    seriesData: [],
    seriesName: "归档档案统计"
  },
  searchData: {
    xData: [],
    seriesData: [],
    seriesName: "总搜索次数"
  }
};
export default {
  name: "Index",
  components: {
    PanelGroup,
    LineChart,
    RaddarChart,
    PieChart,
    BarChart
  },
  data() {
    return {
      // 弹框开关
      dialogFormVisible: false,
      formLabelWidth: '120px',
      // 计数
      count: {
        archCount: 0,
        limitCount: 0,
        typeCount: 0,
        typeArchCount: 0,
        searchCount: 0
      },
      // 默认显示数据
      chartData: chartDatas.archData,
      //存储用户ID
      userId: "",
      form: {
        newPwd: ""
        },
    };
  },
  created() {
    this.openDia()
    // 馆藏情况统计
    listByDept().then(response => {
      var array = response.data;
      for (let i in array) {
        this.count.archCount = this.count.archCount + array[i].value;
        chartDatas.archData.seriesData.push({
          value: array[i].value,
          name: array[i].name
        });
        chartDatas.archData.xData.push(array[i].name);
      }
    });
    // 档案期限统计
    listByLimit().then(response => {
      console.log(response);
      var array = response.data;
      for (let i in array) {
        this.count.limitCount = this.count.limitCount + array[i].value;
        chartDatas.limitData.seriesData.push({
          value: array[i].value,
          name: array[i].name
        });
        chartDatas.limitData.xData.push(array[i].name);
      }
    });
    // 档案类型统计
    listByType().then(response => {
      var array = response.data;
      for (let i in array) {
        this.count.typeCount = this.count.typeCount + array[i].value;
        chartDatas.typeData.seriesData.push({
          value: array[i].value,
          name: array[i].name
        });
        chartDatas.typeData.xData.push(array[i].name);
      }
    });
    // 归档档案统计
    listTypeArch().then(response => {
      var array = response.data;
      for (let i in array) {
        this.count.typeArchCount = this.count.typeArchCount + array[i].value;
        chartDatas.typeArchData.seriesData.push({
          value: array[i].value,
          name: array[i].name
        });
        chartDatas.typeArchData.xData.push(array[i].name);
      }
    });
    // 搜索量请求
    listSearchBar().then(response => {
      var array = response.data;
      for (let i in array) {
        this.count.searchCount = this.count.searchCount + array[i].value;
        chartDatas.searchData.seriesData.push({
          value: array[i].value,
          name: array[i].name
        });
        chartDatas.searchData.xData.push(array[i].name);
      }
    });
  },
  methods: {
    // 动态切换数据面板
    handleSetchartDatas(type) {
      this.chartData = chartDatas[type];
    },
    openDia() {
      console.log('仓库设置', this.$store.state.user.firstTag);
      if (this.$store.state.user.firstTag == true) {
        this.dialogFormVisible = true;
      }
    },
    //如果为初始密码登录则修改密码
    changeFirstPwd() {
      // 判断仓库中是否存在初次登录的字段
      let userId = this.$store.state.user.userId;
      resetUserPwd(userId, this.form.newPwd).then(response => {
        if (response.code == 200) {
          this.$message.success("密码修改成功，请重新登录。");
          this.dialogFormVisible = false;
          this.$store.dispatch('LogOut').then(() => {
          //location.href = '/index';
          location.href = '/';
        })
        }
      });
    }
  }
};
</script>

<style lang="scss" scoped>
.dashboard-editor-container {
  padding: 32px;
  background-color: rgb(240, 242, 245);
  position: relative;

  .chart-wrapper {
    background: #fff;
    padding: 16px 16px 0;
    margin-bottom: 32px;
  }
}

@media (max-width: 1024px) {
  .chart-wrapper {
    padding: 8px;
  }
}

.bodyBg {
  // 背景图片样式
  background-image: url("../assets/images/body_bg.jpg");
  width: 100%;
  height: 100%;
  position: fixed;
  background-size: 100% 100%;
  // echart样式
  padding: 10px;
  position: relative;

  .chart-wrapper {
    // 图表背景色
    //background: rgb(71, 63, 63);
    padding: 16px 16px 0;
    margin-bottom: 32px;
  }
}
</style>